<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<div th:replace="pages/admin/commons/header :: header"></div>
<body style="background-color:#fff">
<div class="wap-container">
    <div class="panel">
        <div class="panel-body">
            <form enctype="multipart/form-data" action="/childhealth/test/testFileUpload" method="post"
                  class="form form-horizontal"
                  id="form-member-add">
                <div class="row clearfix">
                    <br><br><br>
                    <input type="hidden" th:value="${type} == toUpd ? 'upd' : 'add'" name="type">
                    <input type="hidden" th:value="${addRecordNode}" name="addRecordNode">

                    <input type="hidden" th:if="${result} != null" th:value="${result.id}" name="nodeId">
                    <input type="hidden" th:if="${result} == null" name="nodeId">

                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>姓名：</label>
                    <div class="form-controls col-xs-8 col-sm-9">

                        <input required lay-verify="required" type="text" class="input-text" th:if="${result} != null"
                               th:value="${result.xm}"
                               placeholder="姓名"
                               name="xm">
                        <input required lay-verify="required" type="text" class="input-text" th:if="${result} == null"
                               placeholder="姓名"
                               name="xm">

                    </div>
                    <br><br><br>
                    <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>性别：</label>
                    <div class="form-controls col-xs-8 col-sm-9">
                        <input type="text" class="input-text" th:if="${result} != null"
                               th:value="${result.xb}"
                               placeholder="性别"
                               name="xb">
                        <input type="text" class="input-text" th:if="${result} == null"
                               placeholder="性别"
                               name="xb">
                    </div>
                    <br><br><br>


                    <!--                    <a href="javascript:void(0)" download="picture.jpg" id="xmTanDownload">点此下载</a>-->
                    <div class="row clearfix">
                        <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>头像：</label>
                        <div class="form-controls col-xs-8 col-sm-9">
								<span class="btn-upload">
									<a href="javascript:void(0);" class="btn btn-primary radius btn-upload"><i
                                            class="Hui-iconfont">&#xe642;</i> 浏览文件</a>
									<input onchange="xmTanUploadImg(this)" type="file" name="file"
                                           id="uploadImg"
                                           class="input-file">
								</span>
                        </div>
                        <img width="200px;" height="200px;" id="selectImg">
                    </div>
                </div>
                <div class="row clearfix">
                    <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                        <button style=" margin-left: inherit" class="btn btn-primary radius" type="submit">
                            [[${type}=='toUpd'? '修改':'添加']]
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div th:replace="pages/admin/commons/footer :: footer"></div>
<script th:src="@{/layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript">


    if (window.FileReader) {
        // var fr = new FileReader();
        // add your code here
    } else {
        alert("Not supported by your browser FileReader!");
    }

    function xmTanUploadImg(obj) {
        var file = obj.files[0];
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function (e) {    //成功读取文件
            var img = document.getElementById("selectImg");
            img.src = e.target.result;   //或 img.src = this.result / e.target == this

            //实现点击下载图片功能
            var xmTanDownload = document.getElementById("xmTanDownload");
            xmTanDownload.setAttribute("href", e.target.result);  //给a标签设置href
        };
    }
</script>
</body>
</html>
